import React from 'react'
import { TagOutlined, StarOutlined, EyeOutlined } from '@ant-design/icons'
import styles from './index.module.scss'
import logo from 'assets/logo.svg'
import {StarIcon, FullStarIcon} from 'components/Icons'
import { viewNumAutoincrement } from 'api/website'
import { message } from 'antd'
export default function RightContent({ sites }) {
  const urlClick = async id => {
    const res = await viewNumAutoincrement({
      id
    })
    if(res.code === 200) {

    } else {
      message.warning(res.msg)
    }
  }
  return (
    <div className={styles.rightContent}>
      {sites.map(category => {
        const { websiteCategoryName, userWebsiteDetailVOs = [] } = category
        return (
          <>
            <div className="title">
              <h4>
                <TagOutlined />
                {websiteCategoryName}
              </h4>
            </div>
            <div className="cards">
              {userWebsiteDetailVOs.map(website => {
                const {id, name, url, imgUrl, remark, viewNum, isCollect } = website
                return (
                  <div className="card">
                    <a href={url} target="_blank" onClick={() => {urlClick(id)}}>
                      <div className="card-body">
                        <div className="url-content">
                        <div className="url-img">
                          <img src={imgUrl} alt="" />
                        </div>
                        <div className="url-info">
                          <div className="name">
                            <strong>{name}</strong>
                          </div>
                          <p className="decrip">
                            {remark}
                          </p>
                        </div>
                        </div>
                        <div className="url-like">
                          <span className="views">
                          <EyeOutlined /> {viewNum}
                          </span>
                          <span className="likes">
                          {
                            isCollect ? <FullStarIcon /> : <StarIcon />
                          }
                          </span>
                        </div>
                      </div>
                    </a>
                  </div>
                )
              })}
            </div>
          </>
        )
      })}
    </div>
  )
}
